<template>
  <div class="page">
    <scroller lock-x>
      <div class="main">
        <div class="head">
          <img style="width: 40vw;margin-bottom: 30px" :src="$base.imgPath+productData.materialImgUrl">
          <rater v-model="raterData" active-color="#F25C75"></rater>
          <label style="font-size: 1.2rem;color: #999">点击星星完成打分</label>
          <x-button class="btn" mini type="primary">提交</x-button>
        </div>
        <!--<div style="width: 100%;text-align: center;margin-top: 30px">
          <img width="90%" src="../../assets/interaction/lianxi.png">
        </div>-->
        <div class="contact">
          <label class="title">联系我们</label>
          <img class="logo" src="../../assets/logo.png"></img>
          <div class="row">
            <div class="left">电话：</div>
            <div class="main" style="flex: 0;min-width: 120px;">{{enterpriseData.tel}}</div>
          </div>
          <!--<div class="row">
            <div class="left">传真：</div>
            <div class="main">010-53205581</div>
          </div>-->
          <div class="row">
            <div class="left">公司地址：</div>
            <div class="main">{{enterpriseData.address}}</div>
          </div>
          <div class="btn" @click="rengou()">我要认购</div>
        </div>
        <div>
          <flexbox>
            <flexbox-item><div class="foot" v-on:click="link()"><img src="../../assets/interaction/logo.png"><label>进入商城</label></div></flexbox-item>
            <flexbox-item><div class="foot right"><img src="../../assets/interaction/qr.png"><label>了解更多</label></div></flexbox-item>
          </flexbox>
        </div>

      </div>
    </scroller>
  </div>
</template>

<script>
  import { Scroller, Rater, XButton, Flexbox, FlexboxItem } from 'vux'

  export default {
    data () {
      return {
        raterData: 3,
        productData:this.$utils.getData("productData").useDefPara,//产品数据
        enterpriseData:this.$utils.getData("enterpriseData"),//企业数据
      }
    },
    components: {
      Scroller,
      Rater,
      XButton,
      Flexbox,
      FlexboxItem
    },
    methods: {
      link () {
        window.location.href = "http://icall.me/app/index.php?i=776&c=entry&eid=25&wxref=mp.weixin.qq.com#wechat_redirect"
      },
      rengou() {
        window.location.href = "http://icall.me/app/index.php?i=776&c=entry&m=ewei_shopv2&do=mobile&r=diypage&id=1242&wxref=mp.weixin.qq.com#wechat_redirect"
      }
    }
  }
</script>
<style scoped>
  .head {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 3vh 0 0;
  }

  .head .vux-rater {
    display: block;
    text-align: center;
    margin-top: -30px;
  }

  .head .btn {
    display: block;
    margin-top: 10px;
  }

  .contact{
    margin: 30px 5% 20px;
    border: 1px dashed #70aa2f;
    position: relative;
    padding: 20px;
  }
  .contact .title{
    position: absolute;
    top: -14px;
    width: 80px;
    text-align: center;
    background-color: #F8F8F8;
    left: 50%;
    margin-left: -40px;
    color: #70aa2f;
    font-weight: bold;
  }
  .contact .btn{
    background: url("../../assets/interaction/contact_btn.png");
    width: 100px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 40px;
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -50px;
    color: #fff;
    text-align: center;
    padding-top: 15px;
    box-sizing: border-box;
    font-size: 1.4rem;
  }
  .contact .row{
    display: flex;
    font-size: 1.4rem;
  }
  .contact .row .left{
    width: 80px;
    text-align: right;
    color: #70aa2f;
  }
  .contact .row .main{
    flex: 1;
    color: #999;
  }
  .contact .logo{
    position: absolute;
    right: 40px;
    top: 20px;
    width: 80px;
  }

  .foot{
    text-align: center;
    width: 23vw;
    float: right;
    margin-right: 10px;
    margin-top: 20px;
  }
  .foot.right{
    float: left;
    margin-left: 10px;
  }
  .foot img{
    width: 100%;
    display: block;
  }
  .foot label{
    color: #70aa2f;
  }

  /*动画*/
  .main{
    animation: opacityA 2s;
  }

  @keyframes opacityA {
    0% {
      opacity: 0;
    }
  }
</style>
